<template>
  <div>
    <div>点击我会变大</div>
    <vue-fabric ref="canvas" :width="width" :height="height"></vue-fabric>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  data() {
    return {
      width: 1000,
      height: 1000,
    };
  },
  methods: {},
  mounted() {
    this.$refs.canvas.freeDrawConfig({
      isDrawingMode: true,
      color: "red",
      drawWidth: 5,
    });
    this.$refs.canvas.createTextbox("这是我的测试", {
      fill: "pink",
    });
    this.$refs.canvas.createItext("这是我的测试可编辑", {
      fill: "pink",
    });
    // 1、定义这两个函数
    function touchEventToMouseEvent(event, eventType) {
      if (
        !event.originalEvent ||
        !event.originalEvent.targetTouches ||
        event.originalEvent.targetTouches.length != 1
      )
        return false;
      var te = event.originalEvent.targetTouches[0];
      var clientX = te.clientX,
        clientY = te.clientY,
        screenX = te.screenX,
        screenY = te.screenY;

      var simEvent = new MouseEvent(eventType, {
        clientX: clientX,
        clientY: clientY,
        screenX: screenX,
        screenY: screenY,
        button: 0,
        buttons: 0,
      });
      return simEvent;
    }

    function findElm(targetElement) {
      targetElement.on("touchstart", function (e) {
        console.log("touchstart");
        console.log(e);
        var simEvent = touchEventToMouseEvent(e, "mousedown");
        if (simEvent != null) {
          $(this)[0].dispatchEvent(simEvent);
        }
      });

      targetElement.on("touchmove", function (e) {
        e.preventDefault();
        console.log("touchmove");
        var simEvent = touchEventToMouseEvent(e, "mousemove");
        if (simEvent != null) {
          $(this)[0].dispatchEvent(simEvent);
        }
      });

      targetElement.on("touchend", function (e) {
        console.log("touchend");
        console.log(e);
        var simEvent = touchEventToMouseEvent(e, "mouseup");
        if (simEvent != null) {
          $(this)[0].dispatchEvent(simEvent);
        }
      });
    }

    // 2、执行 findElm(selectorElement) 即可将移动端的touch
    let selectorElement = this.$refs.canvas
    findElm(selectorElement);
  },
};
</script>
<style lang=""></style>
